<template>
  <div v-loading="isLoading"
       class="container">
    <el-card>
      <template #header>
        <el-form ref="searchForm"
                 inline>
          <el-form-item label="活动类型"
                        prop="news_type">
            <el-select v-model="builingForm.activity_type_id"
                       placeholder="请选择活动类型">
              <el-option label="全部"
                         value="" />
              <el-option v-for="(oVal, oIdx) of type"
                         :key="oIdx"
                         v-bind="oVal" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="getList()">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="table_tool">
          <el-button type="primary"
                     icon="el-icon-plus"
                     @click="showAddOrEdit = true">新增</el-button>
        </div>
      </template>

      <el-table :data="tableData"
                border>
        <el-table-column prop="id"
                         label="id" />
        <el-table-column prop="venv_name"
                         label="场馆名称" />
        <el-table-column prop="venv_addr"
                         label="场馆地址" />
        <el-table-column prop="venv_area"
                         label="场馆面积" />
        <el-table-column prop="people_count"
                         label="容纳人数" />
        <el-table-column prop="venv_type_name"
                         label="场馆分类" />
        <el-table-column prop="venv_banner"
                         label="场馆图片">
          <template slot-scope="{ row }">
            <el-image style="width: 150px; height: auto"
                      :src="row.venv_banner"
                      :preview-src-list="[row.venv_banner]" />

          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="120px"
                         align="center">
          <template slot-scope="{ row }">
            <el-button type="text"
                       @click="EditCommunity(row)">编辑</el-button>
            <el-button type="text"
                       class="red"
                       @click="delCommunityById(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <footer class="footer">
      <el-pagination background
                     layout="total, sizes, pager, jumper"
                     :current-page="searchForm.page"
                     :page-sizes="[10, 20, 30, 50, 100]"
                     :page-size="searchForm.per_page"
                     :total="tableTotal"
                     @size-change="changeSize"
                     @current-change="changeCurrent" />
    </footer>

    <el-dialog :title="(builingForm.$id ? '编辑' : '新增') + '场馆'"
               :visible.sync="showAddOrEdit"
               width="1000px"
               @closed="resetForm()">
      <el-form ref="builingForm"
               :model="builingForm"
               label-width="7em">
        <el-form-item prop="$id"
                      hidden />
        <el-form-item label="场馆名称"
                      prop="venv_name">
          <el-input v-model="builingForm.venv_name"
                    placeholder="请输入场馆名称" />
        </el-form-item>
        <el-form-item class="span-2"
                      label="容纳人数"
                      prop="people_count">
          <el-input v-model="builingForm.people_count"
                    placeholder="请输入容纳人数" />
        </el-form-item>
        <el-form-item class="span-2"
                      label="占地面积"
                      prop="venv_area">
          <el-input v-model="builingForm.venv_area"
                    placeholder="请输入占地面积" />
        </el-form-item>
        <el-form-item class="span-2"
                      label="场馆地址"
                      prop="venv_addr">
          <el-input v-model.number="builingForm.venv_addr"
                    placeholder="请输入场馆地址" />
        </el-form-item>
        <el-form-item class="span-2"
                      label="活动类型"
                      prop="venv_type_id">
          <el-select v-model="builingForm.venv_type_id"
                     placeholder="请选择活动类型">
            <el-option v-for="(oVal, oIdx) of type"
                       :key="oIdx"
                       v-bind="oVal" />
          </el-select>
        </el-form-item>
        <el-form-item class="span-2"
                      label="是否免费"
                      prop="free">
          <el-switch v-model="builingForm.free" />
        </el-form-item>
        <el-form-item class="span-2"
                      label="是否开放"
                      prop="open">
          <el-switch v-model="builingForm.open" />
        </el-form-item>
        <el-form-item label="图片"
                      prop="venv_banner">
          <Upload v-model="builingForm.venv_banner"
                  :file.sync="builingForm.venv_banner" />
        </el-form-item>

        <el-form-item label="详情图片"
                      prop="venv_imgs">
          <el-upload action="#"
                     list-type="picture-card"
                     :auto-upload="false"
                     :file-list="builingForm.venv_imgs"
                     :on-change="handImgChange">
            <i slot="default"
               class="el-icon-plus" />
            <div slot="file"
                 slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail"
                   :src="file.url"
                   alt="">
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in" />
                </span>
                <span class="el-upload-list__item-delete"
                      @click="handleRemove(file)">
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>

      </el-form>
      <template #footer>
        <el-button type="primary"
                   :loading="loading.update"
                   @click="addCommunity()">确 定</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import API from '@/api'
import { table, addOrEdit } from '@/utils/mixins'
import Tinymce from '@/components/Tinymce'
import Upload from '@/components/Upload/SingleImage.vue'
import QRcode from '@/components/QRcode.vue'

export default {
  components: {
    Tinymce,
    Upload,
    QRcode
  },
  mixins: [table, addOrEdit],
  data: () => ({
    showAddOrEdit: false,
    isLoading: true,
    tableData: [],
    tableTotal: 0,
    isKey: false,
    searchForm: {
      page: 1, // 当前页码
      per_page: 20 // 每页条数
    },
    builingForm: {
      $id: '',
      venv_name: '',
      people_count: '',
      venv_area: '',
      venv_addr: '',
      venv_type_id: 1,
      open: false,
      free: false,
      venv_banner: '',
      venv_imgs: []// 最大报名人数
    },
    type: []
  }),

  created () {
    API.getVenueTypeList()
      .then(({ data }) => {
        const type = data.map(item => {
          return { label: item.name, value: item.id }
        })
        this.type = type
        this.getList()
      }).catch((err) => {
      }).finally(() => {
      })
  },

  methods: {
    // 获取列表
    getList () {
      this.isLoading = true
      API.getVenueList(this.searchForm)
        .then(({ data }) => {
          this.tableData = data.items
          this.tableTotal = data.total
        }).catch((err) => {
          this.tableData = []
          this.tableTotal = 0
        }).finally(() => {
          this.isLoading = false
        })
    },

    // 分页
    changeSize (val) {
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent (val) {
      this.searchForm.page = val
      this.getList()
    },

    // 编辑场馆
    EditCommunity (obj) {
      this.builingForm.$id = obj.id
      this.builingForm.venv_name = obj.venv_name
      this.builingForm.venv_area = obj.venv_area
      this.builingForm.people_count = obj.people_count
      this.builingForm.venv_addr = obj.venv_addr
      this.builingForm.venv_type_id = obj.venv_type_id// 最大报名人数
      this.builingForm.open = obj.open// 是否置顶
      this.builingForm.free = obj.free// 是否开启评论
      this.builingForm.venv_banner = obj.venv_banner// 是否需要审核评论
      console.log(obj.venv_imgs)
      this.builingForm.venv_imgs = JSON.parse(obj.venv_imgs).map(item => {
        return { url: item }
      })
      this.showAddOrEdit = true
    },

    // 删除活动
    delCommunityById (id) {
      const _that = this
      this.$confirm(`是否删除改条数据？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          API.delVenue(id)
            .then(({ data }) => {
              this.$message.success('删除成功！')
            }).catch((err) => {
            }).finally(() => {
              _that.getList()
            })
        })
        .catch(() => {
        })
    },

    // 新增场馆
    addCommunity () {
      if (!this.builingForm.venv_name.trim()) return this.$message.error('名称不可为空~~')
      if (!this.builingForm.people_count.trim()) return this.$message.error('容纳人数不可为空~~')
      if (!this.builingForm.venv_area.trim()) return this.$message.error('占地面积不可为空~~')
      if (!this.builingForm.venv_addr.trim()) return this.$message.error('地址不可为空~~')
      if (!this.builingForm.venv_banner) return this.$message.error('缩略图不可为空~~')
      if (this.builingForm.venv_imgs.length == 0) return this.$message.error('详情图不可为空~~')

      const data = {
        venv_name: this.builingForm.venv_name,
        people_count: this.builingForm.people_count,
        venv_area: this.builingForm.venv_area,
        venv_addr: this.builingForm.venv_addr,
        venv_type_id: this.builingForm.venv_type_id,
        open: this.builingForm.open ? '1' : '2',
        free: this.builingForm.free ? '1' : '2',
        venv_banner: this.builingForm.venv_banner,
        venv_imgs: JSON.stringify(this.builingForm.venv_imgs.map(item => {
          return item.url
        }))
      }

      if (this.builingForm.$id) {
        const id = this.builingForm.$id
        API.editVenue(id, data)
          .then(({ data }) => {
            this.$message.success('编辑成功！')
          }).catch((err) => {
          }).finally(() => {
            this.resetForm()
            this.getList()
          })
      } else {
        API.addVenue(data)
          .then(({ data }) => {
            this.$message.success('新增成功！')
          }).catch((err) => {
          }).finally(() => {
            this.resetForm()
            this.getList()
          })
      }
    },

    resetForm () {
      console.log('清楚一下')
      this.builingForm.$id = ''
      this.builingForm.venv_name = '',
        this.builingForm.people_count = '',
        this.builingForm.venv_area = '',
        this.builingForm.venv_addr = '',
        this.builingForm.venv_type_id = 1,
        this.builingForm.open = false,
        this.builingForm.free = false,
        this.builingForm.venv_banner = '',
        this.builingForm.venv_imgs = []
      this.showAddOrEdit = false
      console.log('ok')
    },

    // 图片上传
    handImgChange ({ raw: file }) {
      this.uploadImg(file)
    },

    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    uploadImg: function (file) {
      const _that = this
      const forms = new FormData()
      forms.append('file', file)
      forms.append('app_key', 'weilai')
      forms.append('source_type', '2')
      this.$http.post(`https://files.meta-720.com/upload/v1/`, forms)
        .then(({ data }) => {
          const { source_path } = data.files[0]
          this.builingForm.venv_imgs.push({ url: source_path })
        }).catch(() => {
        })
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-message-box {
    min-width: 400px;
  }
  .el-dialog {
    margin-top: 2vh !important;
  }
  .el-input .el-input__inner {
    border-radius: 4px !important;
  }
  .el-switch {
    transform: translateY(6px);
  }
  .el-message-box__message {
    position: absolute !important;
    top: 50% !important;
    left: 40px !important;
  }
  .el-form-item__label {
    font-size: 16px !important;
  }
}
</style>
